// ------------------------- ↓ 创建信息类 ↓------------------------------------
class show_list {
  constructor(show_box) {
    // 创建列表
    this.list = [];
    this.show_box = show_box;
  }

  // 渲染页面
  render(id, show_area) {
    let options = {
      // 通过data中的学号匹配
      url: `http://localhost:3000/students?stu_id=${id}`,
    };

    p_ajax(options)
      .then((res) => {
        let name = JSON.parse(res)[0].name;
        // 再次返回一个promise继续链式事件
        return p_ajax({
          url: `http://localhost:3000/course?stu_name=${name}`,
        });
      })
      .then((res) => {
        show_area.empty();
        // 插入节点
        this.list = JSON.parse(res);
        this.list.forEach((item) => {
          show_area.append($(`<div>&emsp;${item.name}&emsp;</div>`));
        });
      })
      .catch(() => {
        // 请求失败
        console.log("错误啦！");
      });
  }
}

// ------------------------- ↑ 创建信息类 ↑------------------------------------

// ------------------------- ↓ 获取节点 ↓------------------------------------
let body = $("body");
let input_area = $(".input_area");

let show_area = $(".info_area");

// ------------------------- ↑ 获取节点 ↑------------------------------------

// 创建对象
let info_box = new show_list(show_area);

// ------------------------- ↓ 绑定事件 ↓------------------------------------

// 1.鼠标点击事件
body.bind("click", (evt) => {
  let tar = evt.target;
  // 搜索按钮点击事件
  if (tar.className.includes("select_btn")) {
    let id = input_area[0].value;
    // 渲染页面
    info_box.render(id, show_area);
  }
});

// 2.鼠标按下事件
body.bind("mousedown", (evt) => {
  let tar = evt.target;
  // 搜索按钮按下变色
  if (tar.className.includes("select_btn")) {
    $(tar).addClass("red");
  }
});

// 3.鼠标抬起事件
body.bind("mouseup", (evt) => {
  let tar = evt.target;
  // 搜索按钮抬起不变色
  if (tar.className.includes("select_btn")) {
    $(tar).removeClass("red");
  }
});
// ------------------------- ↑ 绑定事件 ↑------------------------------------
